<template>
  <div>
    <van-popup
      class="popup-all"
      :show="showPopup"
      position="bottom"
      @update:show="updateShow"
      :style="{ height: '80%' }"
      round
    >
      <div class="popup-content">
        <div style="background-color: #fff">
          <CommonHeader
            type="黑"
            leftText="取消"
            title="重置密码"
            rightText="确定"
            :onLeft="onClickLeft"
            :onRight="onClickRight"
          />
        </div>
        <div style="margin: 12px; border-radius: 4px">
          <van-field
            class="field1"
            center
            v-model="data.pwd"
            placeholder="请输入密码"
          />
        </div>

        <div class="my-ts-content">
          <div class="ts-item">
            <img class="ts-item-img" style="width: 16px" :src="tanhao" />
            <span class="ts-item-title">
              提示：至少包含大、小写字母、数字、特殊字符中的三种，长度至少10位
            </span>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
  
  <script setup>
import { ref, defineProps, defineEmits, watch } from "vue";
import tanhao from "@/assets/img/tanhao.png";
const emit = defineEmits(["update:show", "data-selected-click"]);
import uiUtil from "@/util/UiUtil.js";
const props = defineProps({
  dataValue: {
    type: Object,
    default: null,
  },
  show: {
    default: false,
  },
});
watch(
  () => props.show,
  (newValue, oldValue) => {
    showPopup.value = newValue;
    if (newValue) {
      data.value = {
        pwd: uiUtil.decrypt(props.dataValue.UserPassword),
        ...props.dataValue,
      };
    }
  }
);
// watch(
//   () => props.dataValue,
//   (newValue, oldValue) => {
//     console.log('newValue',newValue);

//     data.value = {pwd:uiUtil.decrypt(newValue.UserPassword), ...newValue };
//   }
// );
const showPopup = ref(props.show);
const data = ref({});

const updateShow = (value) => {
  emit("update:show", value);
};
const onClickLeft = () => {
  updateShow(false);
};
const onClickRight = () => {
  //   updateShow(false);
  submitPassword();
};

const submitPassword = () => {
  if (
    data.value.pwd == null ||
    data.value.pwd == null ||
    data.value.pwd == ""
  ) {
    uiUtil.toast("密码不能为空");
    return;
  }
  if (!uiUtil.containsThreeCategories(data.value.pwd)) {
    uiUtil.toast("新密码至少包含大、小写字母、数字、特殊字符中的三种。");
    return;
  }
  if (data.value.pwd.length < 10) {
    uiUtil.toast("新密码长度至少10位。");
    return;
  }
  let params = {
    UserID: data.value.UserID,
    UserPassword: uiUtil.encrypt(data.value.pwd),
  };
  uiUtil.http().postObj({
    url: uiUtil.urlPath.resetFilingEnterprisePersonPwd,
    data: params,
    start: () => {
      uiUtil.toastLoading("加载中...");
    },
    succeed: (res) => {
      if (!res) {
        uiUtil.toastFail("网络超时");
        return;
      }
      if (!res || !res.code || 200 != res.code) {
        uiUtil.toastFail(res.msg);
        return;
      }
      uiUtil.toastSuccess(res.msg);
      updateShow(false);
      emit("data-selected-click", data.value);
    },
    failed: (err) => {
      // debugger;
      uiUtil.toastFail("失败：" + err);
    },
    finish: (type) => {
      // debugger;
      console.log("finish=", type);
      // uiUtil.toastClose();
    },
  });
};
</script>
  
  <style scoped>
.popup-content {
  background-color: #f3f9f8;
  height: 100%;
}

.rounded-field {
  border-radius: 32px;
  padding: 8px 16px;
}

.left-text {
  color: black;
  cursor: pointer;
}

.popup-content :deep(.van-search__content) {
  padding: 0 16px;
  background-color: #f1f1f1;
}

.ts-item {
  display: flex;
  padding: 8px 16px;
  margin: 0 12px;
  align-items: center;
  background-color: #fffaf0;
  border: 1px solid #ffddb4;
  border-radius: 4px;
}

.ts-item-img {
}

.ts-item-title {
  font-size: 13px;
  font-weight: 400;
  color: #876315;
  margin-left: 10px;
}
</style>